{% load staticfiles %}
{% load i18n %}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>{% block title %}h3{% endblock title %}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">

	<!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
	<!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
	<!--script src="js/less-1.3.3.min.js"></script-->
	<!--append ‘#!watch’ to the browser URL, then refresh the page. -->
	
	<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
	<link href="{% static 'css/project.css' %}" rel="stylesheet">
    <!-- Use this to quickly test CSS changes in a template,
      then move to project.css -->
    {% block extra_css %}
    <link href="{% static 'css/jcrop_custom.css' %}" rel="stylesheet">
    {% endblock extra_css %}
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
    <![endif]-->

  <!-- Fav and touch icons -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="{% static 'img/apple-touch-icon-144-precomposed.png' %}">
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="{% static 'img/apple-touch-icon-114-precomposed.png' %}">
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="{% static 'img/apple-touch-icon-72-precomposed.png' %}">
  <link rel="apple-touch-icon-precomposed" href="{% static 'img/apple-touch-icon-57-precomposed.png' %}">
  <link rel="shortcut icon" href="{% static 'img/favicon.png' %}">
  
</head>

<body>
<div class="container">
    
	<div class="row clearfix">
		<div class="col-md-12 column">
		    
		    {% block nav_block %}
			<nav class="navbar navbar-default" role="navigation">
				<div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                  {% if user.is_authenticated %}
                  <a class="navbar-brand" href="{% url 'home' %}">h3</a>
                  {% else %}
                  <a class="navbar-brand" href="{% url 'welcome' %}">h3</a>
                  {% endif %}
                </div>
				
				{% comment %} Authenticated user {% endcomment %}
                <!-- Collect the nav links, forms, and other content for toggling -->
                {% if user.is_authenticated %}
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                      <ul class="nav navbar-nav">
                        <li><a href="{% url 'userena_profile_list' %}">Friend</a></li>
                        <li><a href="{% url 'userena_profile_list' %}">People</a></li>
                      </ul>

                      <ul class="nav navbar-nav navbar-right">
                        <li>
                            <form class="navbar-form navbar-right" role="search">
                              <div class="form-group">
                                <input type="text" class="form-control" placeholder="Search">
                              </div>
                              <button type="submit" class="btn btn-default">Submit</button>
                            </form>
                        </li>
                        {% block user_profile %}
                        <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">{% if user.is_authenticated %}@{{ user.username }}{% endif %} <b class="caret"></b></a>
                          <ul class="dropdown-menu">
                            <li><a href="{% url 'userena_profile_detail' user.username %}">{% trans "View profile" %}</a></li>
                            <li><a href="{% url 'userena_profile_edit' user.username %}">Edit profile</a></li>
                            <li><a href="{% url 'avatar' user.username %}">{% trans "Change Avatar" %}</a></li>
                            <li><a href="{% url 'userena_password_change' user.username %}">{% trans "Change password" %}</a></li>
                            <li><a href="{% url 'userena_email_change' user.username %}">{% trans "Change email" %}</a></li>
                            <li class="divider"></li>
                            <li><a href="{% url 'userena_signout' %}">{% trans "Signout" %}</a></li>
                          </ul>
                        </li>
                        {% endblock user_profile %}
                      </ul>
                    </div><!-- /.navbar-collapse -->
                {% else %}
                {% comment %} Unauthorized user {% endcomment %}
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                      <ul class="nav navbar-nav">
                        <li><a href="{% url 'userena_signin' %}">{% trans "Signin" %}</a></li>
                        <li><a href="{% url 'userena_signup' %}">{% trans "Signup" %}</a></li>
                        <li><a href="{% url 'about' %}">{% trans "About h3" %}</a></li>
                      </ul>
                    </div><!-- /.navbar-collapse -->
                {% endif %}
				
			</nav>
            {%  endblock nav_block %}
            
              <div class="content_title">
                  <h2>{% block content_title %}{% endblock content_title %}</h2>
              </div>
              
            {% block information %}{% endblock information %} 
            
		</div> <!--  end nav column-->
	</div> <!--  end nav row -->
	{% block content %}{% endblock content %}
</div>

<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>

<!-- place project specific Javascript in this file -->
<script src="{% static 'js/project.js' %}"></script>

{% block extra_js %}{% endblock extra_js %}
</body>
</html>
